<template>
	<view>
		<!-- 元素 -->
		<view class="white_1 white"></view>
		<view class="white_2 white"></view>
		<view class="white_3 white"></view>
		<view class="white_4 white"></view>
		<view class="white_5 white"></view>
		<!-- 开头返回内容 -->
		<view class="top">
			<uni-icons class="icon" type="left" color="#fff" @click="backurl"></uni-icons>
			<view class="text">开通VIP</view>
		</view>
		<!-- title -->
		<view class="title">
			<view>内蒙古单招</view>
			<view>考试服务网会员</view>
		</view>
		<!-- 开通会员信息 -->
		<view class="openvip">
			<view class="line">
				<view class="line_l">购买方式</view>
				<view class="line_r">付费购买</view>
			</view>
			<view class="line">
				<view class="line_l">服务对象</view>
				<view class="line_r">会员服务一个人</view>
			</view>
			<view class="line">
				<view class="line_l">服务时间</view>
				<view class="line_r">1年</view>
			</view>
			<view class="line">
				<view class="line_l">应付金额</view>
				<view class="line_r">
					<text class="money">￥298</text>
					<text class="del_line">￥398</text>
				</view>
			</view>
			<view class="btn" @click="pay">按钮</view>
		</view>
		<!--tips-->
		<view class="agreement">
			开通即视为同意
			<text @click="agreement">《内蒙古单招服务网会员正式期-用户协议》</text>
		</view>
		<view class="equity">
			<view class="box">
				<uni-icons custom-prefix="iconfont" type="icon-dingdan" class="icon" size="35"></uni-icons>
				<view class="text">畅享全部题库</view>
			</view>
			<view class="box">
				<uni-icons custom-prefix="iconfont" type="icon-wenjuan" class="icon" size="35"></uni-icons>
				<view class="text">意向志愿填报</view>
			</view>
			<view class="box">
				<uni-icons custom-prefix="iconfont" type="icon-wodeguanzhu" class="icon" size="35"></uni-icons>
				<view class="text">一对一指导</view>
			</view>
			<view class="box">
				<uni-icons custom-prefix="iconfont" type="icon-weixin" class="icon" size="35"></uni-icons>
				<view class="text">畅享全部题库</view>
			</view>
		</view>
		<view style="height:70rpx"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			/**
			 * 返回页面
			 */
			backurl(){
				uni.navigateBack()
			},
			/**
			 * 打开协议页面
			 */
			agreement(){
				uni.navigateTo({
					url:"/subpkg/agreement/agreement"
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background:linear-gradient(to right,#fe9458,#ff5972);
}
.white{
	height:50rpx;
	width:300rpx;
	border-radius: 25rpx;
	background:linear-gradient(to right,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
	position: absolute;
	z-index: 1;
	transform: rotate(-45deg);
}
.white_1{
	left:10rpx;
	top:120rpx;
}
.white_2{
	left:300rpx;
	top:100rpx;
}
.white_3{
	left:300rpx;
	top:200rpx;
}
.white_4{
	left:550rpx;
	top:350rpx;
}
.white_5{
	left:650rpx;
	top:360rpx;
}
/*头部开始*/
.top{
	width: 90%;
	margin:0 auto;
	height:55rpx;
	line-height: 55rpx;
	display: flex;
	justify-content: left;
	margin-top:110rpx;
	vertical-align: middle;
	.icon{
		position: absolute;
	}
	.text{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color:#fff;
	}
}
.title{
	text-align: center;
	color:#fff;
	font-size:80rpx;
	font-weight: bold;
	letter-spacing: 5rpx;
	text-shadow: 5rpx 5rpx 0rpx #ff5972;
	margin:30rpx auto 30rpx;
}
.openvip{
	width:95%;
	height:500rpx;
	border-radius: 15rpx;
	background-color:#fff;
	margin:0 auto;
	.line{
		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle;
		height:90rpx;
		line-height: 90rpx;
		border-bottom:1px dashed #dedede;
		.line_l{
			width: 35%;
			color: #5f5f5f;
			text-align: center;
			letter-spacing: 3rpx;
		}
		.line_r{
			width: 65%;
			color: #ff5972;
			text-align: left;
			.del_line{
				color: #ccc;
				text-decoration: line-through;
			}
			.money{
				font-size:40rpx;
			}
		}
	}
	.btn{
		height:70rpx;
		margin:30rpx auto;
		width: 80%;
		line-height: 70rpx;
		border: 0;
		border-radius: 35rpx;
		text-align: center;
		color:#fff;
		background:linear-gradient(to right,#fe9458,#ff5a71);
		font-size:30rpx;
		letter-spacing: 10rpx;
	}
}
.agreement{
	color:#fff;
	text-align: center;
	line-height:50rpx;
	font-size:25rpx;
	margin:10rpx auto 50rpx;
}
.equity{
	height: 350rpx;
	width:95%;
	margin:20rpx auto 0rpx;
	background:#fff;
	border-radius: 15rpx;
	overflow: hidden;
	display:flex;
	align-items: center;
	vertical-align: middle;
	justify-content: space-around;
	flex-wrap:wrap;
	.box{
		display: flex;
		justify-content: center;
		vertical-align: middle;
		flex-direction: column;
		align-items: center;
		width: 40%;
		height: 40%;
		.text{
			margin-top:20rpx;
			color: #5f5f5f;
		}
	}
}
</style>
